<template>
  <div class="editor-frame--viewport">
    <q-tabs v-model="activeName">
      <q-tab-pane label="全国视角" name="map"> </q-tab-pane>
      <q-tab-pane label="运营中心视角" name="operate"> </q-tab-pane>
    </q-tabs>
    <Renderer
      :screen="screen"
      :map="map"
      :nodes="activeName === 'map' ? nodes : operateNodes"
      :isOperate="activeName === 'operate'"
    />
  </div>
</template>

<script>
export default {
  name: 'Viewport',
};
</script>

<script setup>
import { computed } from '@vue/composition-api';
import Renderer from '@/designer/renderer';
import { useDocument } from '@/designer/hooks';

const document = useDocument();

const nodes = computed(() => {
  return document.value.nodes.value;
});
const operateNodes = computed(() => {
  return document.value.operateNodes.value;
});
const map = computed(() => {
  return document.value.map.value;
});

const screen = computed(() => {
  return document.value.screen.value;
});
const activeName = ref('map');
</script>

<style lang="scss" scoped>
.editor-frame--viewport {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  ::v-deep .q-tabs {
    flex: none;
  }
}
</style>
